<template>
  <MainPage>
    <template #HeaderLeft>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        ref="userListFrom"
        label-width="70px"
      >
        <el-form-item label="用户" prop="uid">
          <change-user-input
            ref="changeUserInput"
            @sendValue="(data) => getData(data, 1)"
            @clear="clear(1)"
          ></change-user-input>
        </el-form-item>
        <el-form-item label="物品" prop="item_id">
          <change-goods-input
            ref="changeGoodsRef"
            url="2"
            @clear="clear(2)"
            @sendValue="(data) => getData(data, 2)"
          ></change-goods-input>
        </el-form-item>
        <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="false">
          <el-button v-repeatClick @click="handleExport"> 导出 </el-button>
        </MainFormBtn>
      </el-form>
    </template>
    <template #HeaderRight>
      
    </template>
    <template #Table>
      <div class="main_table">
        <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        fit
        border
        highlight-current-row
        :span-method="objectSpanMethod"
        :cell-class-name="cellclassname"
      >
        <!-- <el-table-column
					label="序号"
					width="80"
				>
					<template slot="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column> -->
        <el-table-column
          label="用户名称"
          prop="nickname"
        />
        <el-table-column
          label="物品名称"
          prop="goods_name"
        />
        <el-table-column
          label="数量"
          prop="num"
        />
        <el-table-column
          label="单价"
          prop="price"
        />
        <el-table-column
          label="金额"
          prop="money"
        />
        </el-table>
      </div>
    </template>
    <template #Page>
      <MainPagination
        :current-page="current.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        background
        @size-change="changeLimit"
        @current-change="changePage"
      />
    </template>
  </MainPage>
</template>
<script>
import MainPage from "@/components/MainPage";
import {
  turnoverMember_index,
  turnoverMember_export,
} from "@/api/warehouse/warehouseTurnOverBack";
import { exportMethod } from "@/utils";

export default {
  name: "",
  components: {
    MainPage,
  },
  data() {
    return {
      exportMethod,
      form: {
        uid: "",
        item_id: "",
      },
      list: [],
      listLoading: false,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      dialogVisible: false,
      addGoodsForm: {
        name: "",
        goods_spu_id: "",
      },
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.row) {
          return {
            rowspan: row.row,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    cellclassname({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "demo";
      }
    },
    getArticleList() {
      this.current.page = 1;
      this.turnoverMember_index();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.$refs["changeUserInput"].name = "";
      if (this.$refs["changeGoodsRef"]) {
        this.$refs["changeGoodsRef"].name = "";
      }
      this.getArticleList();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.turnoverMember_index();
    },
    changePage(page) {
      this.current.page = page;
      this.turnoverMember_index();
    },
    getData(data, type) {
      if (type == 1) {
        this.form.uid = data.id;
      } else if (type == 2) {
        this.form.item_id = data.id;
      }
    },
    clear(type) {
      if (type == 1) {
        this.form.uid = "";
      } else if (type == 2) {
        this.form.goods_spu_id = "";
      }
    },
    deleteGoods() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
    turnoverMember_index() {
      this.listLoading = true;
      let data = Object.assign(this.form, this.current);
      turnoverMember_index(data).then((res) => {
        if (res.errcode == 0) {
          this.totalCount = res.data.count;

          let list = Object.values(res.data.list);
          let new_list = [];
          list.map((e) => {
            e.map((c, index) => {
              if (index == 0) {
                c.row = e.length;
              }
              new_list.push(c);
            });
          });

          new_list.map((e) => {
            e.nickname = `${e.member.nickname}`;
            e.goods_name = `${e.goods.name}【${e.goods_spu.spu_name.title}】`;
            e.unit_title = `${e.goods_spu.spu_unit.title}`;
            e.inventory_num = `${e.goods_spu.inventory.num}`;
            e.money = this.$toFixed(parseFloat(e.price) * parseFloat(e.num));
          });
          this.list = new_list;
        }
        this.listLoading = false;
      });
    },
    // 导出
    handleExport() {
      let data = JSON.parse(JSON.stringify(this.form));
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      turnoverMember_export(data).then((res) => {
        if (res.code == 500) {
          this.$message.error("导出失败");
        } else {
          this.exportMethod(res, "未还统计", notify);
        }
      });
    },
  },
  created() {
    this.turnoverMember_index();
  },
};
</script>
<style lang='scss' scoped>
/deep/.demo {
  border-right: 1px solid #ebeef5 !important;
}
</style>
